---
import { getCollection, render } from "astro:content";
import MainLayout from "../../layouts/MainLayout.astro";
import FontAwesomeIcon from "../../components/FontAwesomeIcon.astro";
import {
  faArrowLeft,
  faArrowRight,
  faCalendar,
  faUser
} from "@fortawesome/free-solid-svg-icons";
import { format, formatISO } from "date-fns";
import blogMissing from "../../assets/blog-missing.png";
import { Image } from "astro:assets";
import {
  faThreads,
  faXTwitter,
  faFacebook,
  faLinkedin
} from "@fortawesome/free-brands-svg-icons";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts
    .sort((a, b) => {
      if (a.data.date === undefined || b.data.date === undefined) {
        return 0;
      }
      if (a.data.date < b.data.date) {
        return 1;
      } else if (a.data.date > b.data.date) {
        return -1;
      } else {
        return 0;
      }
    })
    .map((post, index) => ({
      params: { slug: post.id },
      props: {
        post,
        previousPost: posts[index - 1] || null,
        nextPost: posts[index + 1] || null
      }
    }));
}

const { data } = Astro.props.post;
const { Content } = await render(Astro.props.post);
---

<MainLayout
  title={data.title}
  description={data.description}
  image={data.cover ? data.cover.src : blogMissing.src}
  articleMetaData={{
    publishedTime: data.date ? formatISO(data.date) : undefined,
    authors: data.author ? [data.author] : undefined
  }}
>
  <main
    class="max-w-5xl container mx-auto pt-4 pb-8 md:pt-24 md:pb-28 flex flex-col items-center !px-4"
  >
    <div
      class="w-full mx-auto flex flex-row justify-between items-center print:hidden"
    >
      <a
        href="/blog"
        class="group text-primary transition-all inline-block mx-0 px-2 py-2 md:py-2.5 hover:bg-accent hover:text-accent-foreground rounded-lg"
      >
        <FontAwesomeIcon
          icon={faArrowLeft}
          class="mr-1.5 w-5 h-5 group-hover:translate-x-1 transition-all align-middle inline-block"
        />
        <span class="align-text-top">Back</span>
      </a>
    </div>
    <header class="text-start mb-6 pb-2 w-full border-b-2 print:pb-0">
      <div class="mb-2">
        <h1 class="text-4xl md:text-5xl py-3 font-bold">
          {data.title}
        </h1>
        <p
          class="mb-6 text-base md:text-lg text-muted-foreground print:mb-4 flex flex-wrap gap-4"
        >
          {
            data.date !== undefined ? (
              <span class="whitespace-nowrap">
                <FontAwesomeIcon
                  icon={faCalendar}
                  class="w-5 !h-5 me-1 inline-block align-middle"
                />
                <span class="align-middle">
                  <>
                    <span class="sr-only">Published on: </span>
                    <time>{format(data.date, "MMMM d, yyyy")}</time>
                  </>
                </span>
              </span>
            ) : null
          }
          {
            data.author !== undefined ? (
              <span class="whitespace-nowrap">
                <FontAwesomeIcon
                  icon={faUser}
                  class="w-5 !h-5 me-1 inline-block align-middle"
                />
                <span class="align-middle">
                  <>
                    <span class="sr-only">Author: </span>
                    <span>{data.author}</span>
                  </>
                </span>
              </span>
            ) : null
          }
        </p>
        <Image
          src={data.cover || blogMissing}
          alt={data.title || null}
          width={1200}
          height={800}
          class="w-full h-auto object-cover rounded-lg md:rounded-xl border border-muted/30 print:hidden"
        />
      </div>
    </header>
    <article
      class="prose w-full max-w-full md:prose-lg print:prose-pre:!whitespace-pre-wrap print:prose-pre:!overflow-x-visible"
    >
      <Content />
    </article>
    <div class="mt-6 pt-6 border-t-2 w-full text-lg print:hidden">
      <div
        class="flex flex-col sm:flex-row text-center sm:text-start gap-4 items-center"
      >
        <span class="block font-semibold text-lg md:text-xl"
          >Share this post!</span
        >
        <div class="flex flex-wrap gap-3 items-center">
          <a
            href={`https://x.com/intent/tweet?text=${encodeURIComponent(data.title || "")}&url=${encodeURIComponent(Astro.url.href)}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <FontAwesomeIcon
              icon={faXTwitter}
              class="w-6 h-6 text-muted-foreground hover:text-primary transition-colors"
            />
          </a>
          <a
            href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(Astro.url.href)}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <FontAwesomeIcon
              icon={faFacebook}
              class="w-6 h-6 text-muted-foreground hover:text-primary transition-colors"
            />
          </a>
          <a
            href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(Astro.url.href)}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <FontAwesomeIcon
              icon={faLinkedin}
              class="w-6 h-6 text-muted-foreground hover:text-primary transition-colors"
            />
          </a>
          <a
            href={`https://threads.com/intent/post?text=${encodeURIComponent(`${data.title} - ${Astro.url.href}`)}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <FontAwesomeIcon
              icon={faThreads}
              class="w-6 h-6 text-muted-foreground hover:text-primary transition-colors"
            />
          </a>
        </div>
      </div>
    </div>
    <div class="mt-6 pt-6 w-full text-lg print:hidden">
      <div class="flex flex-col md:flex-row md:text-lg">
        {
          Astro.props.previousPost ? (
            <a
              href={`/blog/${Astro.props.previousPost.id}`}
              class="group transition-all flex mx-0 pb-1 md:pb-0 md:pe-1 w-full md:w-1/2 justify-start text-start"
            >
              <div class="self-start text-primary group-hover:text-accent">
                <FontAwesomeIcon
                  icon={faArrowLeft}
                  class="me-2 w-5 h-5 group-hover:-translate-x-1 transition-all align-middle inline-block"
                />
              </div>
              <span class="inline-block self-center">
                <>
                  <span class="block align-text-top text-primary group-hover:text-accent transition-colors">
                    Newer
                  </span>
                  <span class="block font-bold">
                    {Astro.props.previousPost.data.title}
                  </span>
                </>
              </span>
            </a>
          ) : (
            <div class="w-1/2" />
          )
        }
        {
          Astro.props.nextPost ? (
            <a
              href={`/blog/${Astro.props.nextPost.id}`}
              class="group transition-all flex mx-0 pb-1 md:pb-0 md:ps-1 w-full md:w-1/2 justify-end text-end"
            >
              <span class="inline-block self-center">
                <>
                  <span class="block align-text-top text-primary group-hover:text-accent transition-colors">
                    Older
                  </span>
                  <span class="block font-bold">
                    {Astro.props.nextPost.data.title}
                  </span>
                </>
              </span>
              <div class="self-start text-primary group-hover:text-accent">
                <FontAwesomeIcon
                  icon={faArrowRight}
                  class="ms-2 w-5 h-5 group-hover:translate-x-1 transition-all align-middle inline-block"
                />
              </div>
            </a>
          ) : (
            <div class="w-1/2" />
          )
        }
      </div>
    </div>
  </main>
</MainLayout>
